<template>
  <!-- 
    可选频道 
      a:定义获取所有频道接口api
      b:导入获取所有频道接口api
      c:调用接口获取所有频道数据
      d:用所有频道-当前用户频道=可选频道
      f:渲染数据
    持久化：
      1：值修改了存储到浏览器
      2：初始值读取浏览器存储
 -->
  <van-action-sheet v-model="isShow" title="频道管理">
    <div class="edit">
      <div class="top">
        <div class="title">我的频道</div>
        <van-button
          @click="isEdit = !isEdit"
          type="danger"
          plain
          size="small"
          >{{ isEdit ? '取消' : '编辑' }}</van-button
        >
      </div>
      <van-grid>
        <van-grid-item
          @click="userClick(index)"
          v-for="(item, index) in currList"
          :key="item.id"
        >
          <span :class="{ red: active === index }">{{ item.name }}</span>
          <van-icon
            @click="delEvent(item, index)"
            v-if="item.name !== '推荐' && isEdit"
            class="del"
            name="cross"
          />
        </van-grid-item>
      </van-grid>
      <div class="top">
        <div class="title">可选频道</div>
      </div>
      <van-grid>
        <van-grid-item
          v-for="item in newList"
          :key="item.id"
          :text="item.name"
          @click="newListClick(item)"
        />
      </van-grid>
    </div>
  </van-action-sheet>
</template>
<script>
import { channels } from '@/api/home'
export default {
  props: {
    // 我的频道
    currList: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  model: {
    prop: 'active',
    event: 'setActive'
  },
  data () {
    return {
      isShow: false,
      allList: [],
      isEdit: false
    }
  },
  created () {
    this.getData()
  },
  computed: {
    // 计算属性 计算出可选频道
    newList () {
      // 所有频道-用户频道
      // 1：对所有频道过滤（filter）：筛选出在用户频道不存在的数据
      // 2：用户频道是否包含相应的id项
      // 3：用every（如果所有项都满足条件返回值true）判断
      // 返回值=数组.every((item)=>{return boolean})
      // 每一项return true 返回值=true
      // 只要有一项为false 返回值=false
      return this.allList.filter(item => {
        // 用户频道是否包含item.id
        const bol = this.currList.every(i => i.id !== item.id)
        // bol=true 不包含，该项要
        return bol
      })
    }
  },
  methods: {
    async getData () {
      const res = await channels()
      this.allList = res.data.channels
      console.log('所有频道', res)
    },
    // 用户频道点击
    userClick (index) {
      // 关闭弹框
      this.isShow = false
      // 修改用户频道选中项的值
      this.$emit('setActive', index)
    },
    // 可选频道点击
    newListClick (item) {
      this.$emit('add', item)
    },
    // 删除事件
    delEvent (item, index) {
      /*
      如果删除的项的下标是大于当前选中项下标
            不理
      如果删除的项的下标是小于当前选中项下标
            当前下标-1
      */
      if (index < this.active) {
        this.$emit('setActive', this.active - 1)
      }
      this.$emit('del', item.id)
    }
  }
}
</script>
<style lang="less" scoped>
.edit {
  padding: 15px;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-size: 18px;
    }
  }
  .red {
    color: red;
  }
}
.del {
  position: absolute;
  right: 0;
  top: 0;
}
</style>
